<template>
    <div class="login">
        <div class="imgBox">
            <van-icon name="arrow-left" size="20px" @click="goback()" />
        </div>
        <div class="title">
            验证码已发送至
        </div>
        <div id="tel" v-text="username">
            {{username}}
        </div>

        <div class="codeTop">
            <div class="left">四位数验证码</div>
            <div class="right1 right" v-if="showagain" @click="getCodeAgain()">
                重新发送
            </div>
            <div class="right right2" v-else>
                {{sec}}秒后重新发送
            </div>
        </div>

        <!-- 验证码输入框 -->
        <van-password-input :value="value" :length="4" :gutter="15" :focused="showKeyboard" @focus="showKeyboard = true"
            :mask="false" />
        <!-- 弹出默认键盘 -->
        <van-number-keyboard :show="showKeyboard" extra-key="." close-button-text="完成" @blur="true" v-model="value"
            @close="complete()" />
    </div>
</template>

<script>
    import { mapMutations } from 'vuex'
    import { Toast } from "vant"
    import { PasswordInput, NumberKeyboard } from 'vant';
    export default {
        data() {
            return {
                username: "",
                sec: "60",
                value: "",
                showKeyboard: true,
                showagain: false,
                type: "",
                sessionid: "",
                vcode: "",
                flag: true,
            }
        },
        methods: {
            // 如果methods里面还有其他函数，就要在辅助函数名称的前面加上扩展运算符
            ...mapMutations(['changeToken']),
            time() {
                var timer = setInterval(() => {
                    this.sec = this.sec - 1;
                    if (this.sec == 0) {
                        this.showagain = true;
                        clearInterval(timer)
                    }
                }, 1000)
            },

            goback() {
                this.$router.back()
            },
            // 点击完成按钮
            complete() {
                this.showKeyboard = false;
                const sessionid=localStorage.getItem('sessionid')
                const username=localStorage.getItem('username')
                // const { username, sessionid, value } = this
                // 提交验证码
                this.$axios.get("/verdict/verifCode", {
                    params: {
                        phone: username,
                        vcode: this.value,
                        sessionid: sessionid
                    }
                }).then((res) => {
                    console.log(res);
                    const { data, status } = res

                    if (data.code == 200) {
                        Toast(data.message)
                        console.log(data)
                        // 成功后跳转重设密码页
                        this.$router.push(
                            {
                                name: 'NewPassword',
                                params: {
                                    username: this.username,
                                    type: this.type
                                }

                            }
                        )
                    } else {
                        Toast(data.message)
                        this.value=""
                        this.showKeyboard=true
                    }

                })
                // console.log(this.value)

                console.log(22222, this.username, this.type)

            },
            // 重新获取验证码
            getCodeAgain() {
                const that = this
                console.log(that.flag)
                const sessionid=localStorage.getItem('sessionid')
                const username=localStorage.getItem('username')
                this.$axios.get("/getverifCode", {
                    params: {
                        phone: that.username,
                        flag: that.flag //判断是注册还是忘记密码
                    }
                }).then((res) => {
                    console.log(res);
                    const { data, status } = res

                    if (data.code == 200) {
                        Toast(data.message)
                        that.sessionid=data.sessionid
                        localStorage.setItem('sessionid',data.sessionid)
                        localStorage.setItem('username',username)
                        console.log(data.vcode)

                    } else {
                        Toast("cuowu")
                    }

                })
            }


        },
        mounted() {
            // alert(666)
            this.time()
            this.type = this.$route.params.type
            const flag = localStorage.getItem('flag')
            const sessionid=localStorage.getItem('sessionid')
            const username=localStorage.getItem('username')
            this.sessionid = sessionid
            this.username = username
            this.flag = flag
            // this.value=this.$route.params.vcode
            console.log(6666, this.username, this.sessionid, this.flag)
        }
    }
</script>

<style lang="scss" scoped>
    .login {
        padding-top: 30px;
        /* background-color: #f8f8f8; */
    }

    .imgBox {
        position: fixed;
        left: 4px;
        top: 10px;
        overflow: hidden;
        width: 24px;
        height: 20px;
    }

    .goback {
        width: 20px;
        height: 24px;
    }

    .title {

        margin: 30px 0;
        margin-left: 12px;
        height: 46px;
        color: rgba(16, 16, 16, 1);
        font-size: 28px;
        text-align: left;
        font-family: SourceHanSansSC-bold;
    }

    #tel {
        margin: 30px 0;
        margin-left: 12px;
        font-size: 18px;
        color: #999;
        font-weight: 900;
    }

    .codeTop {
        display: flex;
        width: 90%;
        margin: 20px auto;
        justify-content: space-between;
        font-size: 14px;
    }

    .left {
        color: #B0A5A5;
    }

    .right {
        color: rgba(125, 227, 7, 1);
    }

    .right2 {
        color: #B0A5A5;
    }


    .van-password-input__security li {
        border: 1px solid #bbb;
    }
</style>